<template>
    <el-result v-if="errorMsg" icon="error" :title="errorMsg" sub-title="error Tip">
        <template #extra>
            <el-button type="primary" @click="$router.push('/plug')">返回</el-button>
        </template>
    </el-result>

    <el-form v-else :model="data.formData" label-width="auto" style="max-width: 600px">
        <template v-for="item, key in data.apiData" :key="key">

            <el-form-item :label="item.title">

                <template v-if="item.type == 'text'">
                    <el-input v-model="data.formData[key]" :placeholder="item.tip" clearable />
                </template>

                <template v-else-if="item.type == 'password'">
                    <el-input v-model="data.formData[key]" type="password" :placeholder="item.tip" clearable
                        show-password />
                </template>

                <template v-else-if="item.type == 'textarea'">
                    <el-input v-model="data.formData[key]" type="textarea" :placeholder="item.tip" clearable />
                </template>

                <template v-else-if="item.type == 'number'">
                    <el-input v-model="data.formData[key]" type="number" :placeholder="item.tip" clearable />
                </template>

                <template v-else-if="item.type == 'radio'">
                    <el-radio-group v-model="data.formData[key]">
                        <el-radio v-for="rValue, rKey in item.options" :key="rKey" :value="rKey">{{ rValue }}</el-radio>
                    </el-radio-group>
                </template>

                <template v-else-if="item.type == 'select'">
                    <el-select v-model="data.formData[key]" :placeholder="item.tip">
                        <el-option v-for="sValue, sKey in item.options" :key="sKey" :label="sValue" :value="sKey" />
                    </el-select>
                </template>

                <template v-else-if="item.type == 'checkbox'">
                    <el-checkbox-group v-model="data.formData[key]">
                        <el-checkbox v-for="cValue, cKey in item.options" :key="cKey" :label="cValue" :value="cKey">
                            {{ cValue }}
                        </el-checkbox>
                    </el-checkbox-group>

                </template>

                <template v-else-if="item.type == 'date'">
                    <el-date-picker v-model="data.formData[key]" type="date" :placeholder="item.tip" format="YYYY-MM-DD"
                        date-format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                </template>

                <template v-else-if="item.type == 'datetime'">
                    <el-date-picker v-model="data.formData[key]" type="datetime" :placeholder="item.tip"
                        format="YYYY-MM-DD HH:mm:ss" date-format="YYYY-MM-DD HH:mm:ss"
                        value-format="YYYY-MM-DD HH:mm:ss" />
                </template>

                <template v-else-if="item.type == 'color'">
                    <el-color-picker v-model="data.formData[key]" />
                </template>

                <template v-else-if="item.type == 'image'">
                    <el-upload :action="getDomain() + `/upload/index`" class="uploadImage" :show-file-list="false"
                        :on-success="(response) => { handlUploadSuccess(response, key) }"
                        :before-upload="beforeImageUpload">
                        <img v-if="data.formData[key]" :src="data.formData[key]" class="image" />
                        <el-icon v-else class="image-uploader-icon">
                            <Picture />
                        </el-icon>
                    </el-upload>
                </template>

                <template v-else-if="item.type == 'video'">
                    <el-upload :action="getDomain() + `/upload/index`" class="uploadImage" :show-file-list="false"
                        :on-success="(response) => { handlUploadSuccess(response, key) }"
                        :before-upload="beforeVideoUpload" :data="{ type: 'video' }">
                        <video v-if="data.formData[key]" controls width="640" height="360">
                            <source :src="data.formData[key]" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                        <el-icon v-else class="image-uploader-icon">
                            <VideoCamera />
                        </el-icon>
                    </el-upload>
                </template>

                <template v-else-if="item.type == 'audio'">
                    <el-upload :action="getDomain() + `/upload/index`" class="uploadImage" :show-file-list="false"
                        :on-success="(response) => { handlUploadSuccess(response, key) }"
                        :before-upload="beforeAudioUpload" :data="{ type: 'audio' }">
                        <div v-if="data.formData[key]" style="padding: 10px;">
                            <audio :src="data.formData[key]" controls loop />
                        </div>

                        <el-icon v-else class="image-uploader-icon">
                            <Headset />
                        </el-icon>
                    </el-upload>
                </template>

                <template v-else-if="item.type == 'file'">
                    <el-upload :action="getDomain() + `/upload/index`" class="uploadImage" :show-file-list="false"
                        :on-success="(response) => { handlUploadSuccess(response, key) }"
                        :before-upload="beforeFileUpload" :data="{ type: 'file' }">

                        <el-icon class="image-uploader-icon">
                            <Document />
                        </el-icon>

                        <template v-if="data.formData[key]" #tip>
                            <div class="el-upload__tip">
                                {{ data.formData[key] }}
                            </div>
                        </template>

                    </el-upload>
                </template>


            </el-form-item>

        </template>

        <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button @click="$router.push('/plug')">返回</el-button>
        </el-form-item>

    </el-form>
</template>

<style>
.uploadImage .image {
    width: 178px;
    height: 178px;
    display: block;
}

.uploadImage .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.uploadImage .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.image-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>

<script setup>

import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getSetting,setSetting } from '@/apis/plugin'
import { VideoCamera, Picture, Headset, Document } from '@element-plus/icons-vue'
import { message } from '@/util/message'
import { getDomain, beforeImageUpload, beforeVideoUpload, beforeAudioUpload, beforeFileUpload } from '@/util/common'

const data = reactive({
    apiData: {},
    formData: {}
})
const errorMsg = ref(false)
const router = useRouter()

getSetting(router.currentRoute._value.params.className).then(res => {
    data.apiData = res;
    errorMsg.value = false;

    data.formData._ = {}
    for (let [key, item] of Object.entries(res)) {
        // console.log(key, item.value)
        data.formData[key] = item.value
    }

}).catch((err) => {
    errorMsg.value = err
})


const onSubmit = () => {
    data.formData['plugin_class'] = router.currentRoute._value.params.className
    setSetting(data.formData)
}

const handlUploadSuccess = (response, field) => {
    // console.log(response,uploadFile,field)
    if (response.state) {
        message('success', '上传成功')
        data.formData[field] = response.data.url;
    } else {
        message('error', response.msg)
    }
}

</script>